<template>
<div id="app">
    <keep-alive :include="keepAliveView">
        <router-view></router-view>
    </keep-alive>
</div>
</template>
<script>
export default {
    name:'App',
    data(){
        return {
            keepAliveView:'',  //需要缓存的组件，逗号分隔
        };
    },
    created(){  //获取配置图片数据
        this.getKeepAliveView();
    },
    methods:{
        getKeepAliveView(){  //每一帧都获取可缓存列表，防止前进时设置缓存无法及时更新
            const self = this;
            requestAnimationFrame(function func(){  //保证路由名与组件名一致
                let list = self.$router.options.routes.filter(item=>{
                    if(!item.meta) return false;
                    return item.meta.myKeepAlive;
                }).map(item=>{
                    return item.name;
                });
                self.keepAliveView = "," + list.join(",");
                requestAnimationFrame(func);
            });
        },
    },
}
</script>
<style lang="scss">
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: left;
    color: #2c3e50;
}
</style>
